<template>
  <div>
    <basic-table
      class="head-table"
      v-show="showHead"
      ref="headTable"
      :tableParams="headTableParams"
    >
    </basic-table>
    <basic-table
      ref="addStoreTable"
      :searchForm="searchForm"
      :tableParams="tableParams"
      :getListApi="getListApi"
    >
    </basic-table>
  </div>
</template>

<script>
export default {
  name: 'sticky-table',
  props: {
    tableParams: {
      type: Object,
      default: () => {
        return {
          // 多选-判断来自哪个页面
          // mutiSelectName: {
          //   type: String,
          //   default: ''
          // },
          // 多选-唯一标识
          // mutiSelectUniqueKey: {
          //     type: String,
          //     default: ''
          // },
          // 搜索按钮id；new Date().getTime() + parseInt(Math.random() * 1000)
          // btnId: {
          //   type: String,
          //   default: ''
          // },
          // 后端返回列表参数名
          listName: {
            type: String,
            default: ''
          },
          // 标签-默认标签名为tag；若有多个，那么需要在表格栏的列中加“tagName”
          // tag: {
          //   type: Array,
          //   default: () => []
          // },
          // 表格操作，默认没有
          // tableOption: {
          //   type: Object,
          //   default: null
          // },
          // 表格栏
          tableColumns: {
            type: Array,
            default: () => []
          }
        }
      }
    },
    headTableParams: {
      type: Object
    },
    // 获取列表接口
    getListApi: {
      type: Function,
      default: null
    },
    // 搜索条件
    searchForm: {
      type: Object,
      default: () => { }
    },
    // 表格数据-外部传入
    tableData: {
      type: Array,
      default: () => []
    },
    tableTotal: {
      type: Number,
      default: 10
    }
  },
  data() {
    return {
      showHead: false,
      scrollTop: 0,
      headTableHeight: 0,
      tableOffset: {
        top: 0,
        height: 0
      }
    }
  },
  watch: {
    scrollTop(val, oldVal) {
      if (val > this.tableOffset.top - this.headTableHeight) {
        this.showHead = true
      } else {
        this.showHead = false
      }
    }
  },
  mounted() {
    window.addEventListener('scroll', () => {
      this.scrollTop = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset
      // console.log(this.scrollTop)
    })
    setTimeout(() => {
      this.$refs.headTable.$children[0].bodyWrapper.setAttribute('style', 'display: none')
      console.log(this.$refs.addStoreTable, this.$refs.addStoreTable.$el.offsetTop)
      this.tableOffset.top = this.$refs.addStoreTable.$el.offsetTop
      this.tableOffset.height = this.$refs.addStoreTable.$el.offsetHeight
      this.headTableHeight = this.$refs.headTable.$el.offsetHeight
    }, 1000)
  }
}
</script>

<style scoped>
.head-table {
  position: sticky;
  top: 0;
  z-index: 1;
}
</style>